<template>
  <div class="app-container">
    <el-form ref="form"
             :model="form"
             :label-position="labelPosition"
             class="register-form">
      <el-row :gutter="60">
        <el-col :span="8">
          <el-row :gutter="20">
            <el-col :span="6">
              <img src="@/assets/image/kpmg.svg" alt="" width="80" height="80" class="marginTop10">
            </el-col>
            <el-col :span="18">
              <el-form-item label="事务所名称">
                <el-input v-model="form.firmName" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="事务所编号">
                <el-input v-model="form.officeNumber" type="text" readonly />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="统一社会信用代码">
                <el-input v-model="form.unifiedSocialCreditCode" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事务所执业证书">
                <img src="@/assets/image/kpmg.svg" alt="">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签章注册会计师证书">
                <img src="@/assets/image/kpmg.svg" alt="">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起始日期">
                <el-input v-model="form.approvedPracticeDate" type="text" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束日期" disabled="">
                <el-input v-model="form.approvedPracticeDate" type="text" readonly />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="事务所执业证书编号">
                <el-input v-model="form.practiceCertificateNo" type="text" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="所属省份">
                <el-input v-model="form.province" type="text" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="所属区县">
                <el-input v-model="form.district" type="text" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯地址">
                <el-input v-model="form.mailingAddress" type="text" readonly/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item label="联系人">
                    <el-input v-model="form.contacts" type="text" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="联系电话">
                    <el-input v-model="form.contactNumber" type="text" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="联系人手机号">
                    <el-input v-model="form.phoneNumberOfContactPerson" type="text" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button
          size="medium"
          type="primary"
          @click.native.prevent="handleExamine('通过')"
        >
          <span>审核通过</span>
        </el-button>
        <el-button
          size="medium"
          type="primary"
          @click.native.prevent="handleExamine('拒绝')"
        >
          <span>审核拒绝</span>
        </el-button>
        <el-button
          size="medium"
          type="default"
          @click.native.prevent="handleGoBack"
        >
          <span>取消</span>
        </el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>

export default {
  name: "ExamineDetail",
  data() {
    return {
      reason: '',
      labelPosition: "top",
      form: {
        firmName: '毕马威会计事务所', // 事务所名称 100
        officeNumber: '312231231213213231123', // 事务所编号
        practiceCertificateNo: '312231231213213231123', // 事务所执业证书编号
        province: '', // 所属省份 20
        district: '', // 所属区县 20
        unifiedSocialCreditCode: '', // 统一社会信用代码 50
        licenseNo: '', // 批准执业文号 50
        approvedPracticeDate: '', // 批准执业日期 20
        mailingAddress: '', // 通信地址 100
        contacts: '', // 联系人 10
        contactNumber: '', // 联系电话 20
        phoneNumberOfContactPerson: '', // 联系人手机号 20
      },
    };
  },
  created() {

  },
  methods: {
    handleGoBack() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.colseCurWin();
    },
    handleExamine(param) {
      this.$prompt('理由',`审核${param}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: `请输入${param}理由`,
        inputPattern: /\S/,
      }).then(({ value }) => {
        this.reason = value;
        // 请求接口
        this.$message({
          type: 'success',
          message: '审核通过'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消审核'
        });
      });
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-form-item__label{
    position: relative;
    font-size: 15px;
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';  // 去掉 * 号
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';  // 后置 * 号
    color: #ff4949;
    margin-right: 4px;
    right: -15px;
    top: 2px;
    position: absolute;
  }
  ::v-deep .el-input__inner{
    &::-webkit-input-placeholder {
      font-size: 13px;
    }
  }
  ::v-deep .el-date-editor.el-input{
    width: 100%;
  }
  /*readonly 只读样式*/
  ::v-deep  input[readonly]{ border: 1px solid #EEF0F3;} /*input框只读样式*/
  ::v-deep  textarea[readonly]{ border: 1px solid #EEF0F3;} /*textarea框只读样式*/
  ::v-deep   .el-select{
    input[readonly]{ border: 1px solid #EEF0F3;} /*select的 input框默认就是只读的，要还原只读(带边框)样式*/
  }
</style>
